<template>
    <view class="content">
        <view class="nav">
        	<view class="nav-i" :class="{active : type == 2}" @click="chooseNav(2)">系统通知</view>
        	<view class="nav-i" :class="{active : type == 1}" @click="chooseNav(1)">平台公告</view>
        </view>
		
		<!-- <view class="item" v-if="type == 2" v-for="(item, index) in 2" :key="index">
			<view class="top">
				<view class="time">昨天 10:20</view>
			</view>
			<view class="down">
				<view class="text">
					<view class="title u-line-1">系统通知</view>
					<view class="sub u-line-1">您购买的美的至尊料理机已经发货</view>
				</view>
			</view>
		</view> -->
		
		<view class="item" v-for="(item, index) in list" :key="index" @click="toDetails(item)">
			<view class="top">
				<view class="time">{{item.create_time}}</view>
			</view>
			<view class="down">
				<image v-if="item.image_uri" :src="item.image_uri" class="img"></image>
				<view class="text">
					<view class="title u-line-1">{{item.name}}</view>
					<view class="sub u-line-1" v-if="item.content">{{item.content}}</view>
				</view>
			</view>
		</view>
		
		<view style="height: 94rpx;padding-top: 30rpx;">
		    <u-loadmore :status="status" v-if="status != 'loadmore'" />
		</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                type: 2,
				status: 'loadmore', //是否显示没有更多了
				page: 1,
				list: [], 
            };
        },
        onLoad() {
            this.getList()
        },
        onReachBottom() {
        	if(this.page == 1){return}
        	this.getList()
        },
        methods: {
            chooseNav(num) {
				if (this.type == num) return
            	this.type = num
				this.page = 1;
				this.list = [];
				this.status = 'loadmore';
				this.getList()
            },
            
            toDetails(item) {
				this.$gTo(`/pages/notice/details?id=${item.id}`)
            },
			
			getList() {
				if (this.status == 'nomore') return;
				this.status = 'loading';
				this.$ajax('applets/notice', {
					userToken: this.$getSync('userToken'),
					page: this.page,
					limit: 10,
					type: this.type,//1-公告 2-系统消息
				}).then(ret => {
					if (ret.status == 0) {
						if (ret.data.length > 0) {
							this.list = this.list.concat(ret.data);
							this.page++;
							this.status = 'loadmore'
						} else {
							this.status = 'nomore'
						}
					} else {
						this.$toast(ret.message);
					}
				});
			},
        }
    };
</script>

<style lang="scss">
	
    page{
        background-color: #f5f5f5;
    }
	.nav{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		margin-bottom: 30rpx;
	}
	.nav-i{
		width: calc(100vw / 2);
		text-align: center;
		font-size: 30rpx;
		padding: 25rpx 0;
	}
	.active{
		color: #2558ab;
		position: relative;
	}
	.active::after{
		display: block;
		content: '';
		width: 32rpx;
		height: 8rpx;
		background-color: #2558ab;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}
	
	.item{
		margin: 0 20rpx 40rpx;
	}
	.top{
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: 20rpx;
	}
	.time{
		font-size: 24rpx;
		color: #fff;
		padding: 10rpx 20rpx;
		background-color: #dfdfdf;
		border-radius: 50rpx;
	}
	.down{
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
	}
	.img{
		width: 710rpx;
		height: 280rpx;
	}
	.text{
		padding: 30rpx;
	}
	.title{
		font-size: 30rpx;
		font-weight: bold;
		padding-bottom: 10rpx;
	}
	.sub{
		font-size: 24rpx;
		color: #666666;
	}
	

</style>
